<template>
  <view class="container">
    <view class="tab-bar">
      <view v-for="(item, index) in tabList" :key="index" class="tab-item" :class="{ active: current === index }"
        @click="onTabClick(index)">
        {{ item.name }}
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-bar">
      <input type="text" placeholder="输入场地名称、地点" />
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view v-for="(order, index) in orders" :key="index" class="order-card">
        <view class="order-header">
          <text class="order-no">订单号: {{ order.orderNo }}</text>
          <text class="order-status" :class="{'status-0': order.status === '0', 'status-1': order.status === '1', 'status-2': order.status === '2'}">
            {{ getStatusText(order.status) }}
          </text>
        </view>

        <view class="order-info">
          <text class="info-label">项目名称:</text>
          <text class="info-value">{{ order.projectName }}</text>
        </view>

        <view class="order-info">
          <text class="info-label">场地位置:</text>
          <text class="info-value">{{ order.projectLocation }}</text>
        </view>

        <view class="order-info">
          <text class="info-label">日期:</text>
          <text class="info-value">{{ timestampToDateString(order.date) }}</text>
        </view>

        <view class="order-info">
          <text class="info-label">时间:</text>
          <text class="info-value">{{ order.startTime }} - {{ order.endTime }}</text>
        </view>

        <view class="order-info">
          <text class="info-label">地址:</text>
          <text class="info-value">{{ order.venueAddress }}</text>
        </view>

        <button class="sign-btn" @click="handleSign(order.id)" v-if="order.status === '0'">
          签到
        </button>
      </view>

      <view v-if="orders.length === 0" class="empty-tip">
        <image src="/static/images/venue.png"></image>
        <text>暂无订单记录</text>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    createorders,
    createchenckins // 修正API函数名拼写错误
  } from '@/api/MyOrderView/MyOrderView.js'
  // 导入时间格式化工具函数
  import {
    timestampToDateString
  } from '@/utils/formatTimeAndSort'

  export default {
    data() {
      return {
        tabList: [{
            name: '全部'
          },
          {
            name: '待签到'
          },
          {
            name: '已完成'
          },
          {
            name: '已取消'
          }
        ],
        current: 0,
        orders: []
      }
    },
    methods: {
      // 将工具函数注册为组件方法
      timestampToDateString,
      onTabClick(index) {
        this.current = index
        this.loadOrders()
      },
      getStatusText(status) {
        const statusMap = {
          '0': '待签到',
          '1': '已完成',
          '2': '已取消'
        }
        return statusMap[status] || '未知状态'
      },
      async loadOrders() {
        try {
          const res = await createorders({
            status: this.current === 0 ? null : this.current - 1
          })

          if (res.data.success) {
            this.orders = res.data.data.orders
            console.log(this.orders, '订单')

          }
        } catch (error) {
          console.error('加载订单失败:', error)
        }
      },
      async handleSign(orderId) {
        uni.showLoading({
          title: '获取位置中...',
          mask: true
        });

        try {
          // 获取当前位置
          const position = await new Promise((resolve, reject) => {
            uni.getLocation({
              type: 'wgs84',
              success: resolve,
              fail: reject
            });
          });
          console.log(position, '位置信息');
          console.log(position.longitude);
          console.log(position.latitude);

          // 提交签到信息
          const res = await createchenckins({
            orderId,
            longitude: position.longitude,
            latitude: position.latitude
          });

          if (res.data.success) {
            uni.showToast({
              title: '签到成功',
              icon: 'success'
            });
            // 刷新订单列表
            this.loadOrders();
          } else {
            uni.showToast({
              title: res.data.message || '签到失败',
              icon: 'none'
            });
          }
        } catch (error) {
          console.error('签到失败:', error);
          uni.showToast({
            title: '获取位置失败，请检查位置权限',
            icon: 'none'
          });
        } finally {
          uni.hideLoading();
        }
      }
    },
    mounted() {
      this.loadOrders()
    }
  }
</script>

<style scoped>
  .container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 20px;
  }

  .tab-bar {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }

  .tab-item {
    padding: 15px 0;
    font-size: 14px;
    color: #666;
  }

  .tab-item.active {
    color: #2BA245;
    border-bottom: 2px solid #2BA245;
  }

  .search-bar {
    padding: 10px 15px;
    background-color: #fff;
  }

  .search-bar input {
    width: 100%;
    padding: 8px 15px;
    border-radius: 18px;
    border: 1px solid #eee;
    background-color: #f5f5f5;
    font-size: 14px;
  }

  .order-list {
    padding: 10px;
  }

  .order-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
  }

  .order-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
  }

  .order-no {
    font-size: 14px;
    color: #666;
  }

  .order-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
  }

  .status-0 {
    color: #FF9500;
    background-color: #FFF4E5;
  }

  .status-1 {
    color: #2BA245;
    background-color: #E8F5E9;
  }

  .status-2 {
    color: #999;
    background-color: #f5f5f5;
  }

  .order-info {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .info-label {
    color: #999;
    width: 70px;
  }

  .info-value {
    color: #333;
    flex: 1;
  }

  .sign-btn {
    position: absolute;
    right: 15px;
    bottom: 15px;
    background-color: #2BA245;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
  }

  .empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
  }

  .empty-tip image {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    opacity: 0.5;
  }

  .empty-tip text {
    color: #999;
    font-size: 14px;
  }
</style>
